<template>
	<view class="dialog-container" v-if="display">
		<view class="dialog-mask" @click.stop="hideDialog"></view>
		<view class="shell-main">
			<view class="shell-title">{{title}}</view>
			<slot></slot>
			<text class="shell-btn" @click="clikConfirm">{{confirmText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dialog-shell",
		props: {
			title: {
				type: String,
				required: true,
				validator: value => {
					return value.length > 0
				}
			},
			confirmText: {
				type: String,
				required: false,
				default: '确认',
				validator: value => {
					return value.length > 0
				}
			}
		},
		data() {
			return {
				display: false
			};
		},
		
		methods: {

			showDialog() {
				this.display = true

			},
			hideDialog() {
				this.display = false
			},
			clikConfirm(){
				this.$emit("confirm")
				this.display=false
			}
		}
	}
</script>

<style>
	.dialog-container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 1;
	}

	.dialog-mask {
		opacity: 0.5;
		background-color: black;
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		min-height: 100vh;
	}

	.shell-main {
		display: flex;
		flex-direction: column;
		position: absolute;
		opacity: 1;
		width: 80%;
		margin-left: 10%;
		margin-top: 40%;
		background-color: white;
		border-radius: 15rpx;
	}

	.shell-title {
		font-size: 30rpx;
		padding: 15rpx;
		color: white;
		background-color: #cc3300;
		border-top-right-radius: 15rpx;
		border-top-left-radius: 15rpx;

	}

	.shell-btn {
		color: #cc3300;
		font-size: 30rpx;
		text-align: center;
		font-weight: bold;
		background-color: #ededed;
		padding: 20rpx;
	}
</style>